<template>
  <div id="weeklyPlan">
    <div class="weeklyPlanFrom">
      <span class="weeklyPlanFromTitle">施工单位：</span>
      <el-select
        v-model="weeklyPlanObj.applyOrgId"
        placeholder="请选择"
      >
        <el-option
          v-for="item in OrgList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <span class="weeklyPlanFromTitle">计划状态：</span>
      <el-select
        v-model="weeklyPlanObj.approveStatusCode"
        placeholder="请选择"
      >
        <el-option
          v-for="item in StatusList"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        >
        </el-option>
      </el-select>
      <span class="weeklyPlanFromTitle">日期：</span>
      <el-date-picker
        value-format="yyyy-MM-dd"
        v-model="weeklyPlanObj.date"
        type="date"
        placeholder="选择日期"
      >
      </el-date-picker>
    </div>
    <div class="weeklyPlanBtn flex">
      <div>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="sendKey(2)"
          >新增</el-button
        >
      </div>
      <div>
        <el-button
          type="primary"
          @click="serch()"
          >查询</el-button
        >
        <el-button @click="reset()">重置</el-button>
      </div>
    </div>
    <div class="weeklyPlanTable">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        header-row-class-name="formTable"
        height="620"
      >
        <el-table-column
          align="center"
          prop="weekRange"
          label="周计划"
          width="250"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="applyOrgName"
          label="申请单位"
          width="250"
        >
          <template slot-scope="scope">
            <span style="color: #fcca00"> {{ scope.row.applyOrgName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="applyUserName"
          label="申请人"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="phone"
          label="联系电话"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="申请时间"
          width="180"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="approveStatusName"
          label="状态"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.approveStatus == 99"
              style="color: red"
            >
              {{ scope.row.approveStatusName }}</span
            >
            <span
              v-else
              style="color: #409eff"
            >
              {{ scope.row.approveStatusName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="translate"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.approveStatusName"
              type="text"
              @click="translation(3, scope.row.id)"
              >查看</el-button
            >
            <el-button
              v-if="scope.row.canApprove == 1"
              type="text"
              @click="
                ruleForm.procInstId = scope.row.procInstId
                innerVisible = true
              "
              >审批</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="weeklyPlanweeklyPlan">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="weeklyPlanObj.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="weeklyPlanObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      width="30%"
      title="审批流程"
      :visible.sync="innerVisible"
      append-to-body
      :destroy-on-close="false"
      :modal="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="特殊资源"
          prop="resource"
        >
          <el-radio-group v-model="ruleForm.approveOperation">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="批复意见"
          prop="comment"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.comment"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  weekPlanGetApproveStatusList,
  weekPlanGetPage,
  weekPlanApprove,
} from '/src/http/productSchedule/weekPlan.js'
import { getOrgList } from '/src/http/productSchedule/userMg.js'
export default {
  props: ['getKey'],
  data() {
    return {
      weeklyPlanObj: {
        approveStatusCode: '',
        applyOrgId: '',
        date: '',
        pageNum: 1,
        pageSize: 10,
      },
      OrgList: [],
      StatusList: [],
      tableData: [],
      total: 0,
      innerVisible: false,
      ruleForm: {
        procInstId: '',
        approveOperation: '',
        comment: '',
      },
    }
  },
  components: {},
  created() {},
  mounted() {
    this.initialize()
    this.serch()
  },
  methods: {
    handleSizeChange(val) {
      this.weeklyPlanObj.pageSize = val
      this.serch()
    },
    handleCurrentChange(val) {
      this.weeklyPlanObj.pageNum = val
      this.serch()
    },
    sendKey(num) {
      this.getKey(num)
    },
    translation(num, id) {
      this.getKey(num, id)
    },
    async initialize() {
      try {
        this.StatusList = await weekPlanGetApproveStatusList().then((res) => {
          return res.data
        })
        this.OrgList = await getOrgList().then((res) => {
          return res.data
        })
      } catch (error) {
        console.log('接口调用出错::: ', error)
      }
    },
    async serch() {
      try {
        this.tableData = await weekPlanGetPage({
          pageNum: this.weeklyPlanObj.pageNum,
          pageSize: this.weeklyPlanObj.pageSize,
          approveStatusCode: this.weeklyPlanObj.approveStatusCode,
          applyOrgId: this.weeklyPlanObj.applyOrgId,
          date: this.weeklyPlanObj.date,
        }).then((res) => {
          this.total = res.data.total
          return res.data.records
        })
      } catch (error) {
        console.log('接口调用出错::: ', error)
      }
    },
    async submitForm(formName) {
      console.log(formName)
      let obj = this.ruleForm
      try {
        await weekPlanApprove(obj).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: '审批完成',
              type: 'success',
            })
            this.innerVisible = false
          } else {
            this.$message.error(res.message)
          }
        })
      } catch (error) {
        console.log('接口调用出错::: ', error)
      }
    },

    reset() {
      this.weeklyPlanObj = {
        pageNum: 1,
        pageSize: 10,
        approveStatusCode: '',
        applyOrgId: '',
        date: '',
      }
      this.serch()
    },
  },
}
</script>

<style lang="less" scoped>
#weeklyPlan {
  .weeklyPlanFrom {
    margin-left: 3rem;
  }
  .weeklyPlanFromTitle {
    font-size: 14px;
    padding: 0 1rem;
    font-weight: 600;
  }
  .weeklyPlanBtn {
    margin: 1rem 4rem;
  }
  .weeklyPlanTable {
    width: 95%;
    margin: 0 auto;
  }
  .weeklyPlanweeklyPlan {
    position: absolute;
    bottom: 1rem;
    right: 5rem;
  }
}
</style>
<style lang="less"></style>
